<script setup lang="ts">
import { reactive, toRefs } from 'vue'

// 1. 定义类型
interface Hero {
  name: string
  level: number
  skills: string[]
}

// 2. 创建响应式对象
const hero = reactive<Hero>({
  name: 'Vue 法师',
  level: 1,
  skills: ['火球术']
})

// 3. 安全解构（保持响应）
const { name, level } = toRefs(hero)

// 4. 升级！
const levelUp = () => {
  level.value++
  if (level.value === 3) hero.skills.push('冰冻术')
  if (level.value === 5) hero.skills.push('闪电术')
}
</script>

<template>
  <div class="card">
    <h2>🌟 关卡 2｜reactive：让"对象"一次响应到底</h2>
    
    <div class="hero-container">
      <h3>{{ name }} Lv.{{ level }}</h3>
      <div class="level-display">
        <span class="level-indicator" v-for="i in Math.max(5, level.value)" :key="i"
              :class="{ 'active': i <= level.value }">
          ⭐
        </span>
      </div>
      <p>技能列表：{{ hero.skills.join('、') }}</p>
      <button @click="levelUp" class="level-btn">打怪升级</button>
    </div>
    
    <div class="explanation">
      <h4>📝 学习要点</h4>
      <ul>
        <li>reactive 只能包裹对象/数组；内部所有属性都会被递归代理</li>
        <li>解构 reactive 会"丢响应"，要用 toRefs 或保持整体引用</li>
      </ul>
      <p class="funny">💡 趣味比喻：reactive 像"响应式大别墅"，门牌号是整栋别墅，拆走一块砖（解构）就失去魔法。</p>
    </div>
  </div>
</template>

<style scoped>
.hero-container {
  margin: 2em 0;
}

.level-display {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 1em 0;
}

.level-indicator {
  font-size: 1.5em;
  opacity: 0.3;
  transition: opacity 0.3s;
}

.level-indicator.active {
  opacity: 1;
  animation: glow 1s ease-in-out;
}

@keyframes glow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.level-btn {
  background-color: #ff9800;
  color: white;
  font-weight: bold;
}

.level-btn:hover {
  background-color: #f57c00;
}

.explanation {
  text-align: left;
  margin-top: 2em;
}

.funny {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 1em;
  border-radius: 8px;
  font-style: italic;
}
</style>